<template>
    <div>
      <el-card shadow="never">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
          <h2 style="margin: 0;">收货地址</h2>
          <el-button type="primary" @click="dialog">新增收货地址</el-button>
        </div>
  
        <!-- 地址列表 -->
        <el-row :gutter="20">
          <el-col :span="8" v-for="(address, index) in addressList" :key="index">
            <el-card shadow="hover" style="margin-bottom: 20px;">
              <div style="line-height: 1.8;">
                <div>
                  <span style="font-weight: bold;">{{ address.username }}</span>
                  <el-tag v-if="address.isDefault" size="small" type="danger" style="margin-left: 10px;">默认</el-tag>
                </div>
                <div>电话：{{ address.phoneNumber }}</div>
                <div>地址：{{ address.address }}</div>
              </div>
              <div style="margin-top: 15px; text-align: right;">
                <el-button size="small" type="primary" link @click="updateDialog(address.id)">编辑</el-button>
                <el-button size="small" type="danger" link @click="deleteAddress(address.id)">删除</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
  
      <!-- 地址编辑对话框 -->
      <el-dialog v-model="dialogVisible" :title="title" width="50%">
        <el-form :model="savaAddress" label-width="80px">
          <el-form-item label="详细地址">
            <el-input v-model="savaAddress.address" type="textarea" :rows="3" placeholder="请输入详细地址" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveAddress">保存</el-button>
        </template>
      </el-dialog>
    </div>
  </template>

<script setup>
    import { ref,onMounted } from 'vue';
    import { ElMessage} from 'element-plus'
    import axios from 'axios'
    import qs from 'qs'

    const user = getUser();

    const addressList = ref([])
    const dialogVisible = ref(false)
    const title= ref ('新增收货地址')


    // 进入页面加载收获地址
    const address =()=>{
        axios.get(BASE_URL+'/v1/address/address/'+user.id).then((res)=>{
            if(res.data.code == 2000){
                // console.log(res.data)
                addressList.value= res.data.data
            }else{
                ElMessage.error(res.data.msg);
            }
        })
    }

    onMounted(()=>{
        address()
    })
    //点击新增地址弹窗显示
    const dialog =()=>{
        dialogVisible.value=true
        savaAddress.value ={}
        title.value= '新增收获地址'
    }
    const savaAddress=ref({
        id:'',
        userId:'',
        address:''
    })
    //保存新增收货地址
    const saveAddress=()=>{
        savaAddress.value.userId= user.id
        let data = qs.stringify(savaAddress.value)
        // console.log(savaAddress.value)
        axios.post(BASE_URL+'/v1/address/saveAddress',data).then((res)=>{
            if(res.data.code == 2000){
                ElMessage.success('保存地址成功')
                dialogVisible.value =false

                address()
            }else{
                ElMessage.error(res.data.msg)
            }
        })
    }


    //编辑按钮
    const updateDialog=(id)=>{
        dialogVisible.value=true
        title.value ='编辑收货地址'
        //console.log(user.id)
        axios.get(BASE_URL+'/v1/address/addressById/'+id).then((res)=>{
            if(res.data.code == 2000){
                // console.log(res.data.data)
                savaAddress.value= res.data.data
            }else{
                ElMessage.error(res.data.msg);
            }
        })
    }

    //删除按钮
    const deleteAddress=(id)=>{
        console.log(id)
       if(confirm("你确定要删除吗")){
           axios.post(BASE_URL+'/v1/address/deleteAddress/'+id).then((res)=>{
                if(res.data.code == 2000){
                    ElMessage.success('删除成功')
                    address()
                }else{
                    ElMessage.error(res.data.msg);
                }
           })
       }
    }
</script>

<style scoped>

</style>


